<!-- 信息查询页面 -->
<template>
  <div class="app-container">
    <p>信息查询页面</p>
    <el-form ref="form" inline :model="form" class="form-options" label-width="100px">
      <el-form-item label="标签ID">
        <el-input v-model="form.tagCode" clearable/>
      </el-form-item>
      <el-form-item label="批次号">
        <el-input v-model="form.batchNo" clearable/>
      </el-form-item>

      <el-form-item label="器材分类">
        <el-select
          v-model="form.parentId"
          :remote-method="remoteEquipmentParent"
          filterable
          :loading="parentEquipmentLoading"
          @change="handleEquipmentParent"
          remote
          clearable>
          <!-- :key,必须是唯一的 -->
          <el-option
            v-for="item in equipmentParentOptions"
            :key="item.id"
            :label="item.parentName"
            :value="item.parentId">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="器材名称">
        <el-select
          v-model="form.equipmentTypeId"
          filterable
          :remote-method="remoteEquipment"
          :loading="equipmentLoading"
          remote
          clearable>
          <el-option
            v-for="item in equipmentTypeOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="form.status" filterable clearable>
          <el-option
            v-for="item in statusOptions"
            :key="item.id"
            :label="item.value"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="入库完成时间" class="long-content">
        <el-date-picker
          v-model="form.inTime"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          align="right">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="生产日期" class="long-content">
        <el-date-picker
          v-model="form.productionDate"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          align="right">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="失效/报废日期" class="long-content">
        <el-date-picker
          v-model="form.expirationDate"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          align="right">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="预警类型" style="width:405px;background:white;" v-if="false">
        <el-checkbox-group v-model="form.msgType" style="width:300px;">
          <el-checkbox style="width:65px;" label="1">库存预警</el-checkbox>
          <el-checkbox style="width:65px;" label="2">失效预警</el-checkbox>
          <el-checkbox style="width:65px;" label="3">未还预警</el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <div class="btns">
        <el-button type="info" @click="onReset">重置</el-button>
        <el-button type="primary" v-permission="['info_query']" @click="onQuery">查询</el-button>
      </div>
    </el-form>
    <!-- 数据列表 -->
    <el-table
      :data="tableData"
      header-cell-class-name="table-header"
      style="width: 100%;margin-top: 20px"
      show-overflow-tooltip>
      <el-table-column
        label="序号"
        type="index"
        width="50">
      </el-table-column>
      <el-table-column
        prop="parentName"
        label="器材分类">
      </el-table-column>
      <el-table-column
        prop="equipmentTypeName"
        label="器材名称">
      </el-table-column>
      <el-table-column prop="tagCode" label="器材标签ID"/>
      <el-table-column prop="statusName" label="状态"></el-table-column>
      <el-table-column prop="equipmentId" label="器材ID" v-if="true"></el-table-column>
      <el-table-column label="操作" width="220px">
        <template slot-scope='scope'>
          <el-button type="primary" @click="goMap(scope.row)">流转明细</el-button>
        </template>
      </el-table-column>

    </el-table>
    <!-- 分页 -->
    <div style="text-align: right;margin-top: 15px">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 15, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

    <!-- 器材轨迹明细页面 -->
    <el-dialog
      title="器材轨迹"
      top="45px"
      v-if="mapDialogVisible"
      append-to-body
      :visible.sync="mapDialogVisible">
      <EquipmentTrackComponent
        :id="selectedMapId"/>
    </el-dialog>

  </div>
</template>

<script>
import EquipmentTrackComponent from '../components/EquipmentTrackComponent'
import {
  getMonitoringInfo,
  getQueryList,//综合信息查询-列表
  getBaseEquipmentTypeList//器材列表（非树形结构）
} from '@/api/warehouse'

export default {
  name: 'Info',
  components: {
    EquipmentTrackComponent
  },
  data() {
    return {
      currentPage: 1,
      total: 0,
      pageSize: 10,
      parentEquipmentLoading: false,
      equipmentLoading: false,
      form: {
        tagCode: '',
        batchNo: '',
        parentId: '',
        parentDis: '',
        equipmentTypeId: '',
        equipmentTypeDis: '',
        status: '',
        inTimeStart: '',
        inTimeEnd: '',
        productionDateStart: '',
        productionDateEnd: '',
        expirationDateStart: '',
        expirationDateEnd: '',
        msgType: []
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      tableData: [],
      //查询条件
      equipmentParentOptions: [],//器材分类
      equipmentTypeOptions: [],//器材名称
      statusOptions: [
        { 'value': '库存', 'id': '0' },
        { 'value': '报废', 'id': '1' },
        { 'value': '失效', 'id': '2' }
      ],//查询条件状态
      //定义弹出框需要的属性
      mapDialogVisible: false,
      selectedMapId: ''
    }
  },
  created() {
    getBaseEquipmentTypeList({ equipmentTypeName: '' }).then(res => {
      this.equipmentTypeOptions = res.resultData
    })

    getBaseEquipmentTypeList({ parentName: '' }).then(res => {
      this.equipmentParentOptions = res.resultData
    })
    this.onQuery()
  },
  methods: {
    //TODO 李怀北 重置不起作用，清空查询条件也不起作用需要修复
    onReset(searchForm) {
      // this.$refs[searchForm].resetFields();
      // console.log("重置");
      this.form = {
        tagCode: '',
        batchNo: '',
        parentId: '',
        parentDis: '',
        equipmentTypeId: '',
        equipmentTypeDis: '',
        status: '',
        inTimeStart: '',
        inTimeEnd: '',
        productionDateStart: '',
        productionDateEnd: '',
        expirationDateStart: '',
        expirationDateEnd: '',
        msgType: []
      }
    },
    onQuery() {
      this.currentPage = 1
      this.getTableData()
    },
    getTableData() {
      //入库时间
      if (this.form.inTime && this.form.inTime[0]) {
        this.form.inTimeStart = this.form.productionDate[0]
      } else {
        this.form.inTimeStart = ''
      }
      if (this.form.inTime && this.form.inTime[1]) {
        this.form.inTimeEnd = this.form.productionDate[1]
      } else {
        this.form.inTimeEnd = ''
      }
      //生产日期
      if (this.form.productionDate && this.form.productionDate[0]) {
        this.form.productionDateStart = this.form.productionDate[0]
      } else {
        this.form.productionDateStart = ''
      }
      if (this.form.productionDate && this.form.productionDate[1]) {
        this.form.productionDateEnd = this.form.productionDate[1]
      } else {
        this.form.productionDateEnd = ''
      }
      //失效/报废日期
      if (this.form.expirationDate && this.form.expirationDate[0]) {
        this.form.expirationDateStart = this.form.expirationDate[0]
      } else {
        this.form.expirationDateStart = ''
      }
      if (this.form.expirationDate && this.form.expirationDate[1]) {
        this.form.expirationDateEnd = this.form.expirationDate[1]
      } else {
        this.form.expirationDateEnd = ''
      }

      const param = { page: this.currentPage, rows: this.pageSize }
      Object.assign(param, this.form)
      getQueryList(param).then(res => { //getQueryList 导入进来的方法
        this.tableData = res.resultData
        this.total = res.total
      })
    },

    //--------------------分割--------------------查询条件模糊检索
    //过滤(方法共用)
    createFilter(queryString) {
      return (rr) => {//rr列表中的元素，这个列表都会被筛选
        return (rr.name.toLowerCase().indexOf(queryString.toLowerCase()) != -1)
      }
    },

    /* 器材分类 */
    remoteEquipmentParent(query) {
      this.parentEquipmentLoading = true //加载过程中没有返回时转圈圈，显示加载中的状态；
      getBaseEquipmentTypeList({ parentName: query}).then(res => {
        this.equipmentParentOptions = res.resultData
        this.parentEquipmentLoading = false
      })
    },
    // 器材分类选择后器材名称联动，范围缩小
    handleEquipmentParent(){
      // console.log("查询器材名称传递的参数信息=========")
      this.remoteEquipment('')
    },

    /* 器材名称 */
    remoteEquipment(query) {
      this.equipmentLoading = true
      // console.log("查询器材名称传递的参数信息，父级ID："+this.form.parentId+"模糊关键字："+query)
      getBaseEquipmentTypeList({parentId: this.form.parentId, equipmentTypeName: query }).then(res => {
        this.equipmentTypeOptions = res.resultData
        this.equipmentLoading = false
      })
    },

    /* 状态 */
    querySearchStatus: function(queryString, cb) {
      const results = this.statusOptions
      var rs = queryString ? results.filter(this.createFilter(queryString)) : results
      cb(rs)
    },
    handleSelectStatus(item) {
      this.form.status = item.id
    },

    //分页用的方法
    handleSizeChange: function(val) {
      this.pageSize = val
      this.currentPage = 1
      this.getTableData()
    },
    handleCurrentChange: function(val) {
      this.currentPage = val
      this.getTableData()
    },

    goMap(row) {
      this.selectedMapId = row.equipmentId + ''
      this.mapDialogVisible = true
      const param = { equipmentId: row.equipmentId }
      //获取监控明细信息
      const data = new Promise(resolve => {
        getMonitoringInfo(param).then(res => {
          resolve(res.resultData)
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.line {
  text-align: center;
}
</style>

